<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="checkUpdate">checkUpdate</button>

    <div v-show="updateDialogVisible"  class="_progress">
      <div class="upload-tips">提示信息：{{tips.info}}</div>
      <div>下载进度： {{downloadPercent}}</div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      updateDialogVisible: false,//更新弹框
      tips: {},//提示信息
      downloadPercent: 0,//下载进度
    }
  },
  methods: {
    async checkUpdate() {
      console.log('检查更新')
      this.updateDialogVisible = true;
      this.tips = {};
      this.downloadPercent = 0;
      const _this = this;
      _this.$electron.ipcRenderer.send("checkForUpdate");
      await _this.$electron.ipcRenderer.on("message", (event, text) => {
        _this.tips = text;
        console.log(text, 'message')
      });
      _this.$electron.ipcRenderer.on("downloadProgress", (event, progressObj) => {
        console.log(progressObj, 'downloadProgress')
        _this.downloadPercent = progressObj.percent || 0;
      });
      _this.$electron.ipcRenderer.on("isUpdateNow", () => {
        _this.$electron.ipcRenderer.send("isUpdateNow");
      });
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
._progress {
  width: 600px;
  min-height: 50px;
  border: 1px solid lightblue;
  margin: 10px auto;
  padding-top: 10px;
  padding-bottom: 10px;
}
.upload-tips {
  color: red;
  margin-bottom: 5px;
}
</style>
